<template>
  <div class="hotplay">
    <Slide :html="TopRatedMovies" />

    <div class="hotlist">
      <Card :CardList=movieOnInfoList />
    </div>
  </div>
</template>
<script>
import Slide from '@/components/home/Slide'
import Card from '@/components/home/Card'
export default {
  data () {
    return {
      TopRatedMovies: '',
      movieOnInfoList: []
    }
  },
  components: {
    Slide,
    Card
  },
  created () {
    this.getTopRatedMovies()
    this.getmovieOnInfoList()
    // this.getmoreComingList()
  },
  mounted () {

  },
  methods: {
    async getTopRatedMovies () {
      const res = await this.$http.getTopRatedMovies()
      this.TopRatedMovies = res.data.reduce((pre, cul, index) => { return pre + cul })
    },
    async getmovieOnInfoList () {
      const res = await this.$http.getmovieOnInfoList()
      this.movieOnInfoList = res.data.movieList
      window.addEventListener('scroll', function () {
        this.$http.getmoreComingList().then(res => {

        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
